var WEBGL = null;
var ANIMATOR = null;

var CONTROLLER_JERARQUIA_SPACES = null;//objeto 3d que mantiene la representacion de los edificios/floors/spaces y portal (objeto de THREE.js)


var MATERIAL_BUILDER = null;
var GEOMETRY_BUILDER = null;
var MESH_BUILDER = null;
var SCENE_BUILDER = null;

var CONTROLLER_BUSQUEDA = null;
var DIALOG_MANAGER = null; //TODO
var COOKIE_CONTROLLER = null; //TODO

var CONTROLLER_PAGE_STATE = null;

var CONTROLLER_CONTROL_FLOW = null;

var BUILDING_TARGET_POSITION ;
/*--------------------------------------------------------------------------------------------------*/
/*-------------------------------------------- onload! ---------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/



//--------------VARIABLES GLOBALES (TODO)----------------//

var debugConsole = false; //para debug firebug TODO



//--------------VARIABLES GLOBALES (TODO)----------------//
function toString(v){
	return "x: "+v.x+" y:"+v.y+" z:"+v.z;
	//return "x: "+v.x.toFixed(2);//+" y:"+v.y+" z:"+v.z;
}

window.onload = function() {
	 
	var obj = UTILS.browserSupportsWebGL();
	if (!obj.supports)
	{
		UI_error_webgl(obj.errorType);
		return; //no seguimos con la carga y generacion de contenido del resto de la pagina
	}
	
	//UI_error_webgl("browserProblem"); return;//TODO
	//UI_error_webgl("webglContextProblem"); return;//TODO
	
	//////////////////////////////////////////////////////////////
	//--------------------- WEBGL FUNCIONA -----------------------
	//////////////////////////////////////////////////////////////
	
	BUILDING_TARGET_POSITION = new THREE.Vector3(900,100,-1500)
	
	
	
      $("#sidebarContainer").show();
   
//  	var altoCanvas = $(window).height() - $("#header").outerHeight(true);
//  	$("#map").css("height",altoCanvas+"px");
//  	$("#sidebarContainer").css("height",altoCanvas+"px");
      if (VERSION_BETA){
    	  $("#btnOverlayPanelBusqueda").css('display','none');
    	  $("#btnOverlayPanelBusqueda").click(function(){
    		  $("#overlayPanelBusqueda").css("display",'none');
    	  });
    	  
    	  var str = 'Pr&oacute;ximamente b&uacute;squeda de caminos';
//    	  var str = 'La b&uacute;squeda de caminos no se encuentra habilitada en esta versi&oacute;n. '
//    		  +'Se incluye una demostraci&oacute;n para el camino desde "Preentrada" hasta el aula "38C"'	
//    		  +'<br><br>Cierre este cartel para simular la b&uacute;squeda.';
    	  $('#overLayBusquedaTexto').html(str);   	  
    	  $("#overlayPanelBusqueda").css("display",'inline');
	  }
      
      
      
      
      CONTROLLER_PAGE_STATE = new controller_page_state();
      CONTROLLER_PAGE_STATE.resizeSideBar();

      COOKIE_CONTROLLER = new cookie_controller();
	  COOKIE_CONTROLLER.loadData();//carga los datos almacenados resultado de ejecuciones previas
	
	  //var materialBuilder = new MaterialBuilder();
	  GEOMETRY_BUILDER = new GeometryBuilder();
	 // MESH_BUILDER = new MeshBuilder(materialBuilder);
	  
	  CONTROLLER_CONTROL_FLOW = new controlFlowController();
	  CONTROLLER_CONTROL_FLOW.init();
	  
	  //crea el controlador de WebGL y su modelo de datos (estructura jerarquica de edificios, niveles y pisos)
	  WEBGL = new controller_webgl();
	  WEBGL.init(); //inicializa los componentes para webgl, crea el scene wrapper e inicia el bucle de renderizado
	  
	  
	  DIALOG_MANAGER = new controller_dialogos();
	  
	  ANIMATOR = new dibujadorCaminos();
	 
	  
	  
//	  $("#chBox").change(function() {
//           if ($(this).attr("checked")){ 
//        	   WEBGL.shadows(true);
//        }
//           else {
//        	   WEBGL.shadows(false);
//        	}
//	  });
	  
	  
	  
	
	  
	  //RADIO BUTTONS TIPO DE ANIMACION 
	  //RADIO BUTTONS TIPO DE ANIMACION 
	  //RADIO BUTTONS TIPO DE ANIMACION 
	  var contenedorRadios2 = $("#divRadiosEscenas");
	  //cargamos los radio buttons segun los tipos de animacion (definidos en dibujadorCamino.js)
	  
	  var arr = [{tipo:"Alem_Fly", name: "FLY", desc:"camara libre"},
			  {tipo:"Alem_1stPerson", name: "1st Person", desc:"camara primera persona"}];
	  
	  for (var i = 0, l = arr.length; i<l; i++){
		  r1 = $("<input />").attr({id: 'radioEsc'+i, type: 'radio', name: 'tipoEscena',  value: arr[i].tipo});
		  texto = arr[i].name; 
		  $(contenedorRadios2).append(r1);
		  
		  var label = $('<label for="radioEsc'+i+'">'+texto+'</label>');
		  $(contenedorRadios2).append(label);
	  }	 
	  
	  //seleccionamos el radio button del tipo de animacion, segun el valor de la configuracion inicial
	  $('input:radio[name=tipoEscena][value='+CONSTANTS.ESCENA_INICIAL+']:nth(0)').attr('checked',true);
	  $(contenedorRadios2).buttonset();
	  
	  //el tooltip hay q asignarselo al label asociado al radio button
	  $( "#" +$(contenedorRadios2).attr('id')+ " label" ).each(function(index) {
		  $(this).attr("title",arr[index].desc);
		  //$(this).tooltip({predelay: 1000}); //TODO 7/03/12
	  });
	  
	  
	  $("input[name=tipoEscena]").change(function(){
		  CONTROLLER_PAGE_STATE.hideActiveSprite();
		  WEBGL.setSceneWrapper($("input[name=tipoEscena]:checked").val());
	  });
	  
	  //fin RADIO BUTTONS TIPO DE ANIMACION 
	  //fin RADIO BUTTONS TIPO DE ANIMACION 
	  
	  
	  //RADIO BUTTONS TIPO DE ANIMACION 
	  //RADIO BUTTONS TIPO DE ANIMACION 
	  //RADIO BUTTONS TIPO DE ANIMACION 
	  var contenedorRadios = $("#divRadiosAnimacionTreeTipo");
	  //cargamos los radio buttons segun los tipos de animacion (definidos en dibujadorCamino.js)
		 var arr = estadoAnimacion.tiposAnimacion;
//		 var arr = ANIMATOR.getTiposAnimacion();
		 for (var i = 0, l = arr.length; i<l; i++){
			 r1 = $("<input />").attr({id: 'radio'+i, type: 'radio', name: 'tipoAnimacion2',  value: arr[i].tipo});
			texto = arr[i].name; 
			 $(contenedorRadios).append(r1);
			 
			 var label = $('<label for="radio'+i+'">'+texto+'</label>');
			 $(contenedorRadios).append(label);
		 }	 
		
		//seleccionamos el radio button del tipo de animacion, segun el valor de la configuracion inicial
		$('input:radio[name=tipoAnimacion2][value='+CONSTANTS.TIPO_ANIMACION_INICIAL+']:nth(0)').attr('checked',true);
		$(contenedorRadios).buttonset();
		
		//el tooltip hay q asignarselo al label asociado al radio button
		$( "#" +$(contenedorRadios).attr('id')+ " label" ).each(function(index) {
		    $(this).attr("title",arr[index].desc);
		    //$(this).tooltip({predelay: 1000}); //TODO 7/03/12
		});
		
		
		$("input[name=tipoAnimacion2]").change(function(){
			ANIMATOR.setTipoAnimacion($("input[name=tipoAnimacion2]:checked").val());	  
		});
		
		//fin RADIO BUTTONS TIPO DE ANIMACION 
		//fin RADIO BUTTONS TIPO DE ANIMACION 
	  
	  //RADIO BUTTONS TIPO DE ANIMACION 
	  //RADIO BUTTONS TIPO DE ANIMACION 
	  //RADIO BUTTONS TIPO DE ANIMACION 
		//UTILS.UI.
	  var contenedorRadios = $("#divRadiosAnimacionTree");
	  //cargamos los radio buttons segun los tipos de animacion (definidos en dibujadorCamino.js)
	  
	   arr = [{tipo:"on", name: "ON", desc:"Animacion al seleccionar un lugar"},
				  {tipo:"off", name: "OFF", desc:"Aplicar cambios en la imagen sin animación"}];
	   var nameRadios = "animacionOnOff";
	   var animacionTreeDefault = 'on';
	  //		 var arr = ANIMATOR.getTiposAnimacion();
	  for (var i = 0, l = arr.length; i<l; i++){
		  r1 = $("<input />").attr({id: 'radio'+nameRadios+i, type: 'radio', name: nameRadios,  value: arr[i].tipo});
		  texto = arr[i].name; 
		  $(contenedorRadios).append(r1);
		  
		  var label = $('<label for="radio'+nameRadios+i+'">'+texto+'</label>');
		  $(contenedorRadios).append(label);
	  }	 
	  
	  //seleccionamos el radio button del tipo de animacion, segun el valor de la configuracion inicial
	  $('input:radio[name='+nameRadios+'][value='+animacionTreeDefault+']:nth(0)').attr('checked',true);
	  $(contenedorRadios).buttonset();
	  
	  //el tooltip hay q asignarselo al label asociado al radio button
	  $( "#" +$(contenedorRadios).attr('id')+ " label" ).each(function(index) {
//		  console.log('index',index)
		  $(this).attr("title",arr[index].desc);
		  //$(this).tooltip({predelay: 1000}); //TODO 7/03/12
	  });
	  
	  if (!animacionTreeDefault){
		  $("#divRadiosAnimacionTreeTipo").addClass('ui-state-disabled');
	  }
	  
	  $("input[name="+nameRadios+"]").change(function(){
		  var val = $("input[name="+nameRadios+"]:checked").val();
		  
		  if (val == 'on'){
			  WEBGL.getSceneWrapper().animateTreeSelection = true;
			  $('#divRadiosAnimacionTreeTipo').removeClass('ui-state-disabled').css({'pointer-events':''})
		  }else{
			  WEBGL.getSceneWrapper().animateTreeSelection = false;
			  $("#divRadiosAnimacionTreeTipo").addClass('ui-state-disabled').css({'pointer-events':'none'})
		  }
		 
	  });
	  
	  //fin RADIO BUTTONS TIPO DE ANIMACION 
	  //fin RADIO BUTTONS TIPO DE ANIMACION 
	  
	  
	 

		
		
		
	  
	  
	  
	  //TODO ------ de aca para abajo refactorizar
	  
	  $("#btnCambiarEstilo").click(function(){
if ($("#cssRef").attr("href") == "css/jQuery_custom_dark/jquery-ui-1.8.18.custom.css"){
	$("#cssRef").attr("href","css/jQuery_custom_light_2/jquery-ui-1.8.18.custom.css");
	$("#header").addClass("ui-widget-content");
	$("#header").removeClass("ui-widget-header");
}else{
	$("#cssRef").attr("href","css/jQuery_custom_dark/jquery-ui-1.8.18.custom.css");
	$("#header").removeClass("ui-widget-content");
	$("#header").addClass("ui-widget-header");
}		  
	  });
	  
	  
	  $("#btnNoRenderizar").click(function(){
		  var renderBool = WEBGL.toggleRenderizar();
		  CONTROLLER_PAGE_STATE.renderFromButton(renderBool);
	  });
	  
	  
	  $("#btnArbolTheme").click(function(){
		 CONTROLLER_BUSQUEDA.changeTreeTheme(); //TODO esta funcion no deberia estar en controller_busqueda
	  });
	  
	  
	  
	  $("#btnShowHideSidebar").button({text: false, icons: {primary: "ui-icon-triangle-1-w"}})
	  .click(function(){
		  $("#sidebarContainer").toggle();
		  if ($("#sidebarContainer").css("display") == "none") {
		      $(this).button("option", "icons", { primary: 'ui-icon-triangle-1-e' });
		    } else {
		      $(this).button("option", "icons", { primary: 'ui-icon-triangle-1-w' });
		    }
		  $("#canvas_webgl").trigger('resize');//BUG (no toma el evento resize el domContainer de webgl)
	  });
	  
	  //botones panel de renderizado
	  $("#btnAbrirPanelAnimacion").button({text: false, icons: {primary: "ui-icon-video"}});
	  $("#btnAbrirPanelCamara").button({text: false, icons: {primary: "ui-icon-gear"}});
	  $("#btnAbrirPanelStats").button({text: false, icons: {primary: "ui-icon-clock"}});
	  $("#btnAbrirPanelContexto").button({text: false, icons: {primary: "ui-icon-newwin"}});
	  $("#btnAbrirPanelUbicacion").button({text: false, icons: {primary: "ui-icon-info"}});
	  
	  
	  $("#btnTreeSearch").button({text: false, icons: {primary: "ui-icon-search"}});
	  $("#btnTreeSearchClear").button({text: false, icons: {primary: "ui-icon-arrowreturnthick-1-n"}});
	  
//	  $(".subContenidoSI").each(function(index){$(this).addClass("subContenidoSI_fondoOscuro");});
//	 $("#sidebar1").addClass("subContenidoSI_fondoOscuro");
	  
	  $(".cross, .cross2").each(function(){$(this).button({text: false, icons: {primary: "ui-icon-closethick"}});$(this).attr("title","Cerrar");});
	  $(".question").each(function(){$(this).button({text: false, icons: {primary: "ui-icon-help"}});$(this).attr("title","Ayuda");});
	  $(".botonTipoAnimacion").each(function(){$(this).button({text: false, icons: {primary: "ui-icon-video"}});$(this).attr("title","Ver tipos de animacion");});
	  
	  
	 
	
	  
	  $(".question").click(function(event){
			var valor = $(this).attr("value");
			var error = true;
			for (var tipoMensaje in CONSTANTS.MENSAJES_AYUDA){
				if (valor == tipoMensaje) {
					error = false;
					break;
				}
			}
			
			if (error) {alert('error'); return;}//TODO
					
			var mensaje = CONSTANTS.MENSAJES_AYUDA[valor];
			DIALOG_MANAGER.showMessage(event.target, mensaje);
			//alert(mensaje);
		});

	  $("#btnScreenshot").click(function(){
		  THREEx.Screenshot.generarScreenshot(WEBGL.getRenderer());
		 // document.location.href =  THREEx.Screenshot.toDataURL(WEBGL.getRenderer());
		 // document.execCommand('SaveAs','1',THREEx.Screenshot.toDataURL(WEBGL.getRenderer()));  
	  });
	  

	  $("#btnControles").click(function(event){
		  DIALOG_MANAGER.showControlers(event.target);
	  });
	  
	 $(".acordionEnDialogo").accordion({active: 0, collapsible: false, autoHeight: false, clearStyle: true});
//	 $("#accordionControles").accordion({active: 0, collapsible: false, autoHeight: false, clearStyle: true});
//	 $("#accordionControles").accordion({active: false, collapsible: true, clearStyle: true});
	 $("#sidebar1").tabs();
	 $("#sidebar1").removeClass("ui-widget");
	 $("#panelBusqueda").removeClass("ui-tabs-panel");
//	 alert("indice-> "+ $("#panelBusqueda").index())
	 //$("#panelJerarquia").removeClass("ui-widget-content");
	// $(".ui-button-icon-primary").each(function(){$(this).removeClass()});
		//
	 CONTROLLER_PAGE_STATE.resizeAll();
	  $("#canvas_webgl").trigger('resize');//BUG (no toma el evento resize el domContainer de webgl)
	 
//	 CONTROLLER_PAGE_STATE.resizeSideBar();
};

//codigo: http://www.khronos.org/webgl/wiki/FAQ
function UI_error_webgl(tipoError){
	var errorContainer = $("#errorContainer");
	$(errorContainer).show();
	
	var msg = null;
	
	switch(tipoError){
	case "browserProblem":
		msg = '' +
		  'Esta p&aacute;gina requiere un navegador que soporte WebGL<br/>' +
		  'Verifique que las propiedades de su navegador est&eacute;n configuradas correctamente. Vea la secci&oacute;n "M&aacute;s informaci&oacute;n" de esta p&aacute;gina<br/><br/>' +
		//  '<a href="http://get.webgl.org">Haga click aqu&iacute; para actualizar su navegador</a>';
		  'Recomendamos que instale Google Chrome <br/>'+
	     'Haga click <a href="https://www.google.com/chrome" style="color: #05f">aqu&iacute;</a> para obtener la &uacute;ltima versi&oacute;n de Google Chrome';
		  
		break;
	case "webglContextProblem":
		msg = '' +
		  "Parece que su computadora no soporta WebGL<br/><br/>" +
		  //'<a href="http://get.webgl.org/troubleshooting/">Haga click aqu&iacute; para mas informaci&oacute;n</a>'
		  'Haga click <a href="http://get.webgl.org/troubleshooting/" style="color: #05f">aqu&iacute;</a> para obtener m&aacute;s informaci&oacute;n';
		  ;
		break;
	}
	
	$(errorContainer).append(msg);
};



